<template>
  <div class="cart" :style="{'min-height':winHeight + 'px'}">
    <div class="cart_top">
      <span>华邦商城</span>
      <p v-if="!ifdel" @click="delhandle">编辑</p>
      <p v-if="ifdel" @click="delok">完成</p>
    </div>
    <ul class="cart_list">
      <li v-for="item,idx in cartData">
        <div class="cart_list01" :class="{chooseborder:item.check==false}" @click="checkHandle(idx)">
          <img :src="img01" alt="" v-show="item.check">
        </div>
        <img class="cart_list_pic" :src="item.goods.pic" alt="">
        <div class="cart_list02">
          <span class="cart_list02_title">{{item.goods.title}}</span>
          <div class="cart_list02_div">
            <span class="cart_price">￥{{item.goods.price}}</span>
            <div>
              <span @click="sum('-',item.goods_num,item.goods.stock,item.goods_id,idx)">-</span>
              <span>{{item.goods_num}}</span>
              <span @click="sum('+',item.goods_num,item.goods.stock,item.goods_id,idx)">+</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="cart_footer">
      <div class="cart_footer_img" :class="{chooseborder:allcheck==false}" @click="allcheckHandle">
        <img :src="img01" alt="" v-show="allcheck">
      </div>
      <span class="cart_footer_text">全选</span>
      <span class="allprice">合计：￥{{allmoney}}</span>
      <div class="jiesuan" v-show="!ifdel" :class="{if_jiesuan:ifjiesuan}">
        <router-link :to="{name:'submit',query:{'data':checkData}}">
          结算
        </router-link>
      </div>
      <div class="jiesuans" v-show="ifdel" @click="del" :class="{if_jiesuan:delcol}">删除</div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import img01 from '../common/images/gouxuan.png'
import img02 from '../common/images/product02.jpg'
import axios from 'axios'
export default {
  data () {
    return {
      cartData: '', // 购物车数据
      allcheck: true,
      img01,
      img02,
      winHeight: '',
      allmoney: '',
      ifjiesuan: true, // 是否能结算
      ifdel: false, // 是否展示删除功能
      delcol: false, // 是否能删除
      checkData: '' // 选中的数据
    }
  },
  methods: {
    getallData () {
      var urls = '/viewCart/' + '/mid/' + 398
      var obj = []
      axios.post('/api/' + urls).then(e => {
        // console.log(e.data)
        for (e of e.data) {
          // console.log(e)
          e.check = this.allcheck
          obj.push(e)
        }
        this.cartData = obj
        this.summoney()
        this.checkobj()
      })
    },
    summoney () {
      var allprice = 0
      for (let e of this.cartData) {
        if (e.check) {
          allprice = parseFloat(allprice) + parseFloat(e.goods.price) * parseFloat(e.goods_num)
        }
      }
      // console.log(allprice)
      this.allmoney = allprice.toFixed(2)
    },
    modifycart (mod, id, num, idx) {
      var urls = 'editCart' + '/goods_id/' + id + '/shop_num/' + num + '/mid/' + 398
      axios.post('/api/' + urls).then(e => {
        // console.log(e)
        // if (e.data.code == 1) {
        if (mod == '+') {
          this.cartData[idx].goods_num++
          this.summoney()
        } else {
          this.cartData[idx].goods_num--
          this.summoney()
        }
        // }
      })
    },
    ifsuan () {
      var obj = this.cartData.filter(e => e.check)
      if (obj.length == 0) {
        this.ifjiesuan = false
      } else {
        this.ifjiesuan = true
      }
    },
    checkHandle (idx) { // 点击勾选
      this.cartData[idx].check = !this.cartData[idx].check
      this.summoney()
      this.ifallcheck()
      this.ifsuan()
      this.ifdelcol()
      this.checkobj()
    },
    ifallcheck () {
      var obj = this.cartData.filter(e => e.check)
      if (this.cartData.length == obj.length) {
        this.allcheck = true
      } else {
        this.allcheck = false
      }
    },
    allcheckHandle () { // 全选
      this.allcheck = !this.allcheck
      this.allcheckHandles(this.allcheck)
      this.summoney()
      this.ifsuan()
      this.ifdelcol()
      this.checkobj()
    },
    allcheckHandles (boole) {
      this.cartData.forEach(e => {
        e.check = boole
      })
    },
    sum (mod, num, stock, goodsid, idx) {
      if (mod == '-') {
        if (+num > 1) {
          num--
          this.modifycart(mod, goodsid, num, idx)
        } else {
          alert('再减就没了')
        }
      }
      if (mod == '+') {
        if (+stock > +num) {
          num++
          this.modifycart(mod, goodsid, num, idx)
        } else {
          alert('没有库存了')
        }
      }
    },
    del () {
      var obj = this.cartData.filter(e => e.check)
      var id = ''
      var urls
      console.log(obj)
      obj.forEach(e => {
        id = id + e.goods_id + ','
      })
      id = id.substring(0, id.length - 1)
      urls = 'deleteCart/' + '/mid/' + 398 + '/ids/' + id
      axios.post('/api/' + urls).then(e => {
        if (e.data.code == 1) {
          this.getallData()
        } else {
          alert('删除失败')
        }
      })
    },
    delhandle () {
      this.ifdel = true
      this.allcheck = false
      this.allcheckHandles(this.allcheck)
      this.summoney()
      this.ifdelcol()
    },
    delok () {
      this.ifdel = false
      this.allcheck = true
      this.allcheckHandles(this.allcheck)
      this.summoney()
    },
    ifdelcol () { // 是否能删除判断
      if (this.ifdel) {
        var obj = this.cartData.filter(e => e.check)
        if (obj.length == 0) {
          this.delcol = false
        } else {
          this.delcol = true
        }
      }
    },
    checkobj () {
      var obj = this.cartData.filter(e => e.check)
      this.checkData = obj
      console.log(this.checkData)
    }
  },
  created () {
    this.winHeight = $(window).height()
    this.getallData()
  }
}
</script>

<style>
.cart{
  padding-bottom: 0 !important;
}
.cart_top{
  width: 6.9rem;
  height: 0.8rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart_top span{
  font-size: 0.24rem;
  color: #222222;
  display: block;
}
.cart_top p{
  font-size: 0.24rem;
  color: #999999;
  display: block;
}
.cart_list{
  width: 7.5rem;
  background-color: #ffffff;
}
.cart_list li{
  width: 6.9rem;
  height: 1.1rem;
  padding: 0.2rem 0.3rem;
  display: flex;
  align-items: center;
}
.cart_list01{
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.cart_list01 img{
  width: 0.3rem;
  display: block;
}
.cart_list_pic{
  width: 1.1rem;
  display: block;
  margin-left: 0.3rem;
}
.cart_list02{
  width: 4.5rem;
  height: 100%;
  margin-left: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart_list02_title{
  width: 4.5rem;
  display: block;
  font-size: 0.24rem;
  color: #222222;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.cart_list02_div{
  width: 4.5rem;
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart_price{
  font-size: 0.24rem;
  color: #e64340;
}
.cart_list02_div div{
  width: 1.5rem;
  height: 0.5rem;
  border: 0.02rem solid #eeeeee;
  display: flex;
}
.cart_list02_div div span{
  width: 0.5rem;
  height: 100%;
  border-right: 0.02rem solid #eeeeee;
  font-size: 0.24rem;
  color: #222222;
  display: block;
  text-align: center;
  line-height: 0.5rem;
}
.cart_list02_div div span:nth-child(3){
  border-right: none;
}
.cart_footer{
  width: 7.2rem;
  height: 1rem;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  bottom: 1rem;
  display: flex;
  align-items: center;
  padding-left: 0.3rem;
}
.cart_footer img{
  width: 0.3rem;
  display: block;
}
.cart_footer_img{
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.cart_footer_text{
  font-size: 0.24rem;
  color: #222222;
  display: block;
  margin-left: 0.2rem;
}
.allprice{
  font-size: 0.24rem;
  color: #e64340;
  margin-left: 1.6rem;
  flex: 1;
}
.jiesuan{
  width: 2rem;
  height: 100%;
  background-color: #eaeaea;
  /* margin-left: 0.59rem; */
}
.jiesuans{
  width: 2rem;
  height: 100%;
  background-color: #eaeaea;
  /* margin-left: 0.59rem; */
  font-size: 0.36rem;
  text-align: center;
  line-height: 1rem;
  color: #ffffff;
}
.chooseborder{
  border: 0.02rem solid #999999;
  box-sizing: border-box;
}
.if_jiesuan{
  background-color: #e64340;
  color: #ffffff;
}
.jiesuan a{
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0.3rem;
  line-height: 1rem;
  text-align: center;
  color: #ffffff;
}
</style>
